<template>
  <div>
    <a-button v-if="!record" type="primary" @click="dialog = true" class="mb-4">设置加贷</a-button>
    <a v-else @click="dialog = true">查看</a>
    <a-modal v-model="dialog" :title="record ? '详情' : '设置加贷'">
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :hideRequiredMark="true"
      >
        <a-form-model-item label="项目地址：" prop="addr">
          <a-select
            show-search
            option-filter-prop="children"
            :filter-option="filterOption"
            @change="Onchange"
            v-model="form.addr"
            :disabled="readOnly && record ? true : false"
          >
            <a-select-option :value="item.projectId" v-for="item in projectList" :key="item.projectId">
              {{ item.addr }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="加贷本金金额：" prop="principal">
          <m-input-number v-model="form.principal" class="length" :disabled="readOnly && record ? true : false" />
        </a-form-model-item>
        <a-form-model-item label="加贷资金成本：" prop="capital">
          <m-input-number v-model="form.capital" class="length" :disabled="readOnly && record ? true : false" />
        </a-form-model-item>
        <a-form-model-item label="加贷用途：" prop="usage">
          <a-input v-model="form.usage" :disabled="readOnly && record ? true : false" />
        </a-form-model-item>
        <a-form-model-item label="预计放款时间：" prop="preLoanDate">
          <a-date-picker v-model="form.preLoanDate" :disabled="readOnly && record ? true : false" />
        </a-form-model-item>
        <a-form-model-item label="加贷申请时间：" prop="applyDate">
          <a-date-picker v-model="form.applyDate" :disabled="readOnly && record ? true : false" />
        </a-form-model-item>
        <a-form-model-item label="加贷出借人手续费：" prop="rate">
          <m-input v-model="form.rate" :disabled="readOnly && record ? true : false" />
        </a-form-model-item>
        <a-form-model-item label="加贷出借人手续费付款方式：" prop="feePayType">
          <a-select v-model="form.feePayType" :disabled="readOnly && record ? true : false">
            <a-select-option :value="1">
              立即付
            </a-select-option>
            <a-select-option :value="4">
              立即资本化
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button v-if="!record" key="back" @click="dialog = false">
          取消
        </a-button>
        <a-button v-else-if="Archive != 1" type="primary" @click="change" v-action:update>修改</a-button>
        <a-button v-if="!record" key="submit" type="primary" @click="submit">
          确定
        </a-button>
        <a-button v-else-if="Archive != 1" type="primary" @click="update" v-action:update>保存</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { getList, creatAddLoan, getAddLoan, updataAddLoan, getAddr, createHistory, getDetailList } from '@/api/common'
import moment from 'moment'
import { commonRule, dateRule } from '@/utils/rules'
export default {
  name: 'addLoan',
  props: ['record'],
  data() {
    return {
      labelCol: { span: 9 },
      wrapperCol: { span: 15 },
      dialog: false,
      readOnly: true,
      Archive: 0,
      form: {
        projectId: '',
        addr: '',
        principal: '',
        capital: '',
        usage: '',
        preLoanDate: '',
        applyDate: '',
        rate: '',
        feePayType: 1
      },
      rules: {
        projectId: commonRule,
        addr: commonRule,
        principal: commonRule,
        capital: commonRule,
        usage: commonRule,
        preLoanDate: dateRule,
        applyDate: dateRule,
        rate: commonRule,
        feePayType: commonRule
      },
      projectList: []
    }
  },
  watch: {
    form: {
      handler(v) {
        const _form = Object.assign({}, this.form)
        _form.applyDate = _form.applyDate ? _form.applyDate.format('X') : null
        _form.preLoanDate = _form.preLoanDate ? _form.preLoanDate.format('X') : null
        this.$store.commit('form/SAVE_DATA', {
          key: 'addLoan',
          value: _form
        })
      },
      deep: true
    },
    dialog(v) {
      if (this.dialog) {
        this.getData()
      }
      if (this.record) {
        this.getDatas()
      }
      console.log(this.record)
      if (!this.record) {
        const formStore = this.$store.state.form?.['addLoan']
        console.log(formStore)
        if (formStore) {
          formStore.applyDate && (formStore.applyDate = moment(formStore.applyDate, 'X'))
          formStore.preLoanDate && (formStore.preLoanDate = moment(formStore.preLoanDate, 'X'))
          formStore && Object.assign(this.form, formStore)
        }
      }
    }
  },
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    change() {
      this.readOnly = false
    },
    async getData() {
      const res = await getAddr()
      this.projectList = res.result.data
    },
    async getDatas() {
      const id = this.record.projectId
      const r = await getDetailList(id)
      this.Archive = r.result.data.Archive
      const form = {
        id: this.record.id
      }
      const res = await getAddLoan(form)
      const _form = res.result.data.list[0]
      for (let k in this.form) {
        this.form[k] = _form[k]
      }
      this.form.preLoanDate = moment(this.form.preLoanDate * 1000)
      this.form.applyDate = moment(this.form.applyDate * 1000)
    },
    async submit() {
      const valid = await this.$refs.form.validate()
      if (!valid) return
      const form = Object.assign({}, this.form)
      // console.log(11111)
      form.preLoanDate = Number(form.preLoanDate.startOf('day').format('X'))
      form.applyDate = Number(form.applyDate.startOf('day').format('X'))
      form.rate = Number(form.rate)
      await creatAddLoan(form)
      this.form = {
        projectId: '',
        addr: '',
        principal: '',
        capital: '',
        usage: '',
        preLoanDate: '',
        applyDate: '',
        rate: '',
        feePayType: 1
      }
      this.$store.commit('form/CLEAR', 'addLoan')
      this.$emit('update')
      this.dialog = false
    },
    async update() {
      const valid = await this.$refs.form.validate()
      if (!valid) return
      const form = Object.assign({}, this.form)
      form.preLoanDate = Number(form.preLoanDate.startOf('day').format('X'))
      form.applyDate = Number(form.applyDate.startOf('day').format('X'))
      form.rate = Number(form.rate)
      await updataAddLoan(this.record.id, form)
      const history = {
        recordType: 2,
        tableId: Number(this.record.id)
      }
      await createHistory(history)
      this.form = {
        projectId: '',
        addr: '',
        principal: '',
        capital: '',
        usage: '',
        preLoanDate: '',
        applyDate: '',
        rate: '',
        feePayType: 1
      }
      this.$emit('update')
      this.dialog = false
    },
    Onchange(v) {
      const choose = this.projectList.find(el => el.projectId == v)
      // console.log(choose)
      this.form.projectId = choose.projectId
    }
  }
}
</script>
<style lang="css" scoped>
.length {
  width: 200px;
}
</style>
